<template>
  <view class="container">
    <view class="no-login" v-if="!hasLogin">
      <view class="c">
        <image class="image" src="/static/static/images/noCart.png"></image>
        <button style="background-color:#A9A9A9" @tap="goLogin">去登录</button>
      </view>
    </view>
    <view class="login" v-else>
      <!-- <view class="service-policy">
        <view class="item">全场优惠券抵扣</view>
        <view class="item">7天无忧快速退货</view>
        <view class="item">满40元免邮费</view>
      </view> -->
      <view class="no-cart" v-if="cartGoods.length <= 0 && brandCartGoods.length <= 0">
        <view class="c">
          <image class="image" src="/static/static/images/noCart.png"></image>
          <view class="c1">暂无商品，去添加点什么吧～</view>
        </view>
      </view>
      <view class="cart-view" v-else>
        <view class="partC1">
          <view :class="'checkbox ' + (checkedAllStatus ? 'checked' : '')" @tap="checkedAll"
            >全选({{ cartTotal.checkedGoodsCount }})</view
          >
          <view class="delete" @tap="deleteCart">删除</view>
        </view>

        <view class="list" v-if="isMultiOrderModel == 1">
          <view class="group-item">
            <view v-for="(bitem, index) in brandCartGoods" :key="index" class="goods">
              <!-- <navigator :url="'../brandDetail/brandDetail?id=' + bitem.brandId" class="h">
                <view class="l">{{ bitem.brandName }} > </view>
              </navigator> -->
              <view
                v-for="(item, index2) in bitem.cartList"
                :key="index2"
                :class="'item ' + (!isEditCart ? 'edit' : '')"
              >
                <view
                  :class="'checkbox ' + (item.checked ? 'checked' : '')"
                  @tap="checkedItem"
                  :data-productid="item.productId"
                ></view>
                <view class="cart-goods">
                  <image class="img" :src="item.picUrl"></image>
                  <view class="info">
                    <view class="t" @click="goodsItemBnt(item)">
                      <text class="name">{{ item.goodsName }}</text>
                    </view>
                    <view class="cart-goods1">
                      <view class="cart-goods11">规格:</view>
                      <view class="cart-goods11" v-for="(item, index) in item.specifications" :key="index">{{
                        item
                      }}</view>
                    </view>
                    <view class="b">
                      <text class="price">￥{{ item.price }}</text>
                      <!-- <text class="num"> x{{ item.number }}</text> -->
                      <!-- <text class="attr">{{ isEditCart ? '已选择:' : ''}}{{item.specifications||''}}</text> -->
                      <view class="selnum" v-if="item.number">
                        <view class="cut" @tap="cutNumber" :data-productid="item.productId">-</view>
                        <input :value="item.number" class="number" disabled="true" type="number" />
                        <view class="add" @tap="addNumber" :data-productid="item.productId">+</view>
                      </view>
                      <view v-else>此商品暂无库存</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="list" v-else>
          <view class="group-item">
            <view class="goods">
              <view v-for="(item, index) in cartGoods" :key="index" :class="'item ' + (isEditCart ? 'edit' : '')">
                <view
                  :class="'checkbox ' + (item.checked ? 'checked' : '')"
                  @tap="checkedItem"
                  :data-productId="item.productId"
                ></view>
                <view class="cart-goods">
                  <image class="img" :src="item.picUrl"></image>
                  <view class="info">
                    <view class="t">
                      <text class="name">{{ item.goodsName }}</text>
                      <text class="num">x{{ item.number }}</text>
                    </view>
                    <view class="attr">{{ isEditCart ? '已选择:' : '' }}{{ item.goodsSpecificationValues || '' }}</view>
                    <view class="b">
                      <text class="price">￥{{ item.price }}</text>
                      <view class="selnum">
                        <view class="cut" @tap="cutNumber" :data-productid="item.productId">-</view>
                        <input :value="item.number" class="number" disabled="true" type="number" />
                        <view class="add" @tap="addNumber" :data-productid="item.productId">+</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="cart-bottom">
          <!-- <view :class="'checkbox ' + (checkedAllStatus ? 'checked' : '')" @tap="checkedAll"
            >全选({{ cartTotal.checkedGoodsCount }})</view
          > -->
          <view style="margin-left: 30rpx;">总计：</view>
          <view class="total"
            >￥<text class="total1">{{ cartTotal.checkedGoodsAmount }}</text></view
          >
          <view class="action_btn_area">
            <!-- <view :class="!isEditCart ? 'edit' : 'sure'" @tap="editCart">{{ !isEditCart ? '编辑' : '完成' }}</view> -->
            <!-- <view class="delete" @tap="deleteCart"
              >删除
              <text>({{ cartTotal.checkedGoodsCount }})</text>
            </view> -->
            <view class="checkout" @tap="checkoutOrder">下单</view>
            <!-- </view>  -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let util = require('../../utils/util.js')
let api = require('../../config/api.js')
let user = require('../../utils/user.js')
let app = getApp()

export default {
  data() {
    return {
      isMultiOrderModel: 0,
      cartGoods: [],
      brandCartGoods: [],
      cartTotal: {
        goodsCount: 0,
        goodsAmount: 0.0,
        checkedGoodsCount: 0,
        checkedGoodsAmount: 0.0,
      },
      isEditCart: false,
      checkedAllStatus: true,
      editCartList: [],
      hasLogin: false,
    }
  },

  components: {},
  props: {},
  onLoad: function(options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function() {
    // 页面渲染完成
  },

  onPullDownRefresh() {
    uni.showNavigationBarLoading() //在标题栏中显示加载

    this.getCartList()
    uni.hideNavigationBarLoading() //完成停止加载

    uni.stopPullDownRefresh() //停止下拉刷新
  },

  onShow: function() {
    // 页面显示
    if (app.globalData.hasLogin) {
      this.getCartList()
    }

    this.setData({
      hasLogin: app.globalData.hasLogin,
    })
  },
  onHide: function() {
    // 页面隐藏
  },
  onUnload: function() {
    // 页面关闭
  },
  methods: {
    on_Show() {
      // 页面显示
      if (app.globalData.hasLogin) {
        this.getCartList()
      }

      this.setData({
        hasLogin: app.globalData.hasLogin,
      })
    },
    goodsItemBnt(it) {
      uni.navigateTo({
        url: '/pages/goods/goods?id=' + it.goodsId,
      })
    },
    goLogin() {
      uni.navigateTo({
        url: '/pages/auth/login/login',
      })
    },

    getCartList: function() {
      let topic = uni.getStorageSync('topic')
      let that = this
      util
        .request(api.CartList, {
          topicId: topic.id,
        })
        .then(function(res) {
          if (res.errno === 0) {
            if (res.data.isMultiOrderModel === 1) {
              that.setData({
                isMultiOrderModel: res.data.isMultiOrderModel,
                brandCartGoods: res.data.brandCartGoods,
                cartTotal: res.data.cartTotal,
              })
            } else {
              that.setData({
                isMultiOrderModel: res.data.isMultiOrderModel,
                cartGoods: res.data.cartList,
                cartTotal: res.data.cartTotal,
              })
            }

            that.setData({
              checkedAllStatus: that.isCheckedAll(),
            })
          }
        })
    },
    isChildCheckedAll: function(cartList) {
      return cartList.every(function(element, index, array) {
        if (element.checked == true) {
          return true
        } else {
          return false
        }
      })
    },
    isCheckedAll: function() {
      let that = this

      if (that.isMultiOrderModel === 1) {
        //多店铺模式的商品全选判断
        return that.brandCartGoods.every(function(element, index, array) {
          if (that.isChildCheckedAll(element.cartList)) {
            return true
          } else {
            return false
          }
        })
      } else {
        //判断购物车商品已全选
        return that.cartGoods.every(function(element, index, array) {
          if (element.checked == true) {
            return true
          } else {
            return false
          }
        })
      }
    },
    doCheckedAll: function() {
      let checkedAll = this.isCheckedAll()
      this.setData({
        checkedAllStatus: this.isCheckedAll(),
      })
    },
    getProductChecked: function(productId) {
      let that = this
      let isChecked = null

      if (that.isMultiOrderModel === 1) {
        that.brandCartGoods.forEach(function(v) {
          let cartList = v.cartList
          cartList.forEach(function(o) {
            if (o.productId === productId) {
              isChecked = o.checked ? 0 : 1
            }
          })
        })
      } else {
        that.cartGoods.forEach(function(o) {
          if (o.productId === productId) {
            isChecked = o.checked ? 0 : 1
          }
        })
      }

      return isChecked
    },
    checkedItem: function(event) {
      //let itemIndex = event.target.dataset.itemIndex;
      let productId = event.currentTarget.dataset.productid
      let that = this
      let productIds = []
      productIds.push(productId)
      let isChecked = that.getProductChecked(productId)

      if (!this.isEditCart) {
        util
          .request(
            api.CartChecked,
            {
              productIds: productIds,
              isChecked: isChecked,
            },
            'POST'
          )
          .then(function(res) {
            if (res.errno === 0) {
              if (res.data.isMultiOrderModel === 1) {
                that.setData({
                  isMultiOrderModel: res.data.isMultiOrderModel,
                  brandCartGoods: res.data.brandCartGoods,
                  cartTotal: res.data.cartTotal,
                })
              } else {
                that.setData({
                  isMultiOrderModel: res.data.isMultiOrderModel,
                  cartGoods: res.data.cartList,
                  cartTotal: res.data.cartTotal,
                })
              }
            }

            that.setData({
              checkedAllStatus: that.isCheckedAll(),
            })
          })
      } else {
        //编辑状态
        if (that.isMultiOrderModel === 1) {
          let tmpBrandCartData = this.brandCartGoods.map(function(element, index, array) {
            let tmpBrandGoods = element.cartList.map(function(childEle, childIndex, childArr) {
              if (childEle.productId === productId) {
                childEle.checked = !childEle.checked
              }

              return childEle
            })
            element.cartList = tmpBrandGoods
            return element
          })
          that.setData({
            brandCartGoods: tmpBrandCartData,
            checkedAllStatus: that.isCheckedAll(),
            'cartTotal.checkedGoodsCount': that.getCheckedGoodsCount(),
          })
        } else {
          let tmpCartData = this.cartGoods.map(function(element, index, array) {
            if (element.productId === productId) {
              element.checked = !element.checked
            }

            return element
          })
          that.setData({
            cartGoods: tmpCartData,
            checkedAllStatus: that.isCheckedAll(),
            'cartTotal.checkedGoodsCount': that.getCheckedGoodsCount(),
          })
        }
      }
    },
    getCheckedGoodsCount: function() {
      let that = this
      let checkedGoodsCount = 0
      let door1 = true

      if (that.isMultiOrderModel === 1) {
        that.brandCartGoods.forEach(function(v) {
          v.cartList.forEach(function(o) {
            if (o.checked === true) {
              checkedGoodsCount += o.number
              if (o.number === 0) {
                door1 = false
              }
            }
          })
        })
      } else {
        that.cartGoods.forEach(function(v) {
          if (v.checked === true) {
            checkedGoodsCount += v.number
          }
        })
      }

      if (door1) {
        return checkedGoodsCount
      } else {
        return 0
      }
    },
    checkedAll: function() {
      let that = this

      if (!this.isEditCart) {
        let productIds = []

        if (that.isMultiOrderModel === 1) {
          that.brandCartGoods.forEach(function(v) {
            v.cartList.forEach(function(o) {
              productIds.push(o.productId)
            })
          })
        } else {
          let productIds = that.cartGoods.map(function(v) {
            return v.productId
          })
        }

        util
          .request(
            api.CartChecked,
            {
              productIds: productIds,
              isChecked: that.isCheckedAll() ? 0 : 1,
            },
            'POST'
          )
          .then(function(res) {
            if (res.errno === 0) {
              if (res.data.isMultiOrderModel === 1) {
                that.setData({
                  isMultiOrderModel: res.data.isMultiOrderModel,
                  brandCartGoods: res.data.brandCartGoods,
                  cartTotal: res.data.cartTotal,
                })
              } else {
                that.setData({
                  isMultiOrderModel: res.data.isMultiOrderModel,
                  cartGoods: res.data.cartList,
                  cartTotal: res.data.cartTotal,
                })
              }
            }

            that.setData({
              checkedAllStatus: that.isCheckedAll(),
            })
          })
      } else {
        //编辑状态,将所有
        let checkedAllStatus = that.isCheckedAll()

        if (that.isMultiOrderModel === 1) {
          let tmpBrandCartData = this.brandCartGoods.map(function(element, index, array) {
            let tmpBrandGoods = element.cartList.map(function(childEle, childIndex, childArr) {
              childEle.checked = !checkedAllStatus
              return childEle
            })
            element.cartList = tmpBrandGoods
            return element
          })
          that.setData({
            brandCartGoods: tmpBrandCartData,
            checkedAllStatus: that.isCheckedAll(),
            'cartTotal.checkedGoodsCount': that.getCheckedGoodsCount(),
          })
        } else {
          let tmpCartData = this.cartGoods.map(function(element, index, array) {
            element.checked = !checkedAllStatus
            return element
          })
          that.setData({
            cartGoods: tmpCartData,
            checkedAllStatus: that.isCheckedAll(),
            'cartTotal.checkedGoodsCount': that.getCheckedGoodsCount(),
          })
        }
      }
    },
    editCart: function() {
      // this.$refs.tabBotRef.CartGoodsCount()
      var that = this

      if (this.isEditCart) {
        this.getCartList()
        this.setData({
          isEditCart: !this.isEditCart,
        })
      } else {
        //编辑状态
        if (that.isMultiOrderModel === 1) {
          let tmpBrandCartData = that.brandCartGoods.map(function(element, index, array) {
            let tmpBrandGoods = element.cartList.map(function(childEle, childIndex, childArr) {
              childEle.checked = false
              return childEle
            })
            element.cartList = tmpBrandGoods
            return element
          })
          that.setData({
            brandCartGoods: tmpBrandCartData,
            isEditCart: !that.isEditCart,
            checkedAllStatus: that.isCheckedAll(),
            'cartTotal.checkedGoodsCount': that.getCheckedGoodsCount(),
          })
        } else {
          let tmpCartData = that.cartGoods.map(function(element, index, array) {
            element.checked = false
            return element
          })
          that.setData({
            // editCartList: this.data.cartGoods,
            cartGoods: tmpCartData,
            isEditCart: !that.isEditCart,
            checkedAllStatus: that.isCheckedAll(),
            'cartTotal.checkedGoodsCount': that.getCheckedGoodsCount(),
          })
        }
      }
    },
    updateCart: function(productId, goodsId, number, id, event) {
      let that = this
      util
        .request(
          api.CartUpdate,
          {
            productId: productId,
            goodsId: goodsId,
            number: number,
            id: id,
          },
          'POST'
        )
        .then(function(res) {
          if (event) {
            let productId = event.currentTarget.dataset.productid
            let cartItem = that.getProductItem(productId)
            let number = cartItem.number + 1
            cartItem.number = number
          }

          that.setData({
            checkedAllStatus: that.isCheckedAll(),
            'cartTotal.checkedGoodsCount': that.getCheckedGoodsCount(),
          })

          that.$parent.set_onShow()
        })
        .catch((err) => {
          uni.showToast({
            title: err.errmsg,
            icon: 'none',
          })
          this.getCartList()
        })
    },
    getProductItem: function(productId) {
      let that = this
      let productItem = null

      if (that.isMultiOrderModel === 1) {
        that.brandCartGoods.forEach(function(v) {
          let cartList = v.cartList
          cartList.forEach(function(o) {
            if (o.productId === productId) {
              productItem = o
            }
          })
        })
      } else {
        that.cartGoods.forEach(function(o) {
          if (o.productId === productId) {
            productItem = o
          }
        })
      }

      return productItem
    },
    setProductItem: function(cartItem, productId) {
      let that = this

      if (that.isMultiOrderModel === 1) {
        let tmpBrandCartData = this.brandCartGoods.map(function(element, index, array) {
          let tmpBrandGoods = element.cartList.map(function(childEle, childIndex, childArr) {
            if (childEle.productId === productId) {
              return cartItem
            } else {
              return childEle
            }
          })
          element.cartList = tmpBrandGoods
          return element
        })
        that.setData({
          brandCartGoods: tmpBrandCartData,
          checkedAllStatus: that.isCheckedAll(),
          'cartTotal.checkedGoodsCount': that.getCheckedGoodsCount(),
        })
      } else {
        let tmpCartData = this.cartGoods.map(function(element, index, array) {
          if (element.productId === productId) {
            return cartItem
          } else {
            return element
          }
        })
        that.setData({
          cartGoods: tmpCartData,
          checkedAllStatus: that.isCheckedAll(),
          'cartTotal.checkedGoodsCount': that.getCheckedGoodsCount(),
        })
      }
    },
    cutNumber: function(event) {
      //let itemIndex = event.target.dataset.itemIndex;
      let productId = event.currentTarget.dataset.productid
      let cartItem = this.getProductItem(productId)
      let number = cartItem.number - 1 > 1 ? cartItem.number - 1 : 1
      cartItem.number = number
      this.setProductItem(cartItem, productId)
      this.updateCart(cartItem.productId, cartItem.goodsId, number, cartItem.id)
    },
    addNumber: function(event) {
      // let itemIndex = event.target.dataset.itemIndex;
      let productId = event.currentTarget.dataset.productid
      let cartItem = this.getProductItem(productId)
      let number = cartItem.number + 1
      // cartItem.number = number
      this.setProductItem(cartItem, productId)
      this.updateCart(cartItem.productId, cartItem.goodsId, number, cartItem.id, event)
    },
    checkoutOrder: function() {
      //获取已选择的商品
      let that = this
      /*var checkedGoods = this.data.cartGoods.filter(function(element, index, array) {
        if (element.checked == true) {
          return true;
        } else {
          return false;
        }
      });
      if (checkedGoods.length <= 0) {
        return false;
      }*/

      if (that.getCheckedGoodsCount() <= 0) {
        uni.showModal({
          title: '',
          content: '请选择商品',
          showCancel: false,
        })
        return false
      } // storage中设置了cartId，则是购物车购买

      try {
        uni.setStorageSync('cartId', 0)
        uni.setStorageSync('seckilled', 0)
        uni.navigateTo({
          url: '/pages/checkout/checkout',
        })
      } catch (e) {}
    },
    deleteCart: function() {
      //获取已选择的商品
      let that = this
      /*let productIds = this.data.cartGoods.filter(function(element, index, array) {
        if (element.checked == true) {
          return true;
        } else {
          return false;
        }
      });
        if (productIds.length <= 0) {
        return false;
      }*/

      // if (that.getCheckedGoodsCount() <= 0) {
      //   uni.showModal({
      //     title: '错误信息',
      //     content: '请勾选需要删除的商品！',
      //     showCancel: false,
      //   })
      //   return false
      // }

      let productIds = []

      if (that.isMultiOrderModel === 1) {
        that.brandCartGoods.forEach(function(v) {
          v.cartList.forEach(function(o) {
            if (o.checked == true) {
              productIds.push(o.productId)
            }
          })
        })
      } else {
        productIds = that.cartGoods.map(function(v) {
          if (v.checked == true) {
            return v.productId
          }
        })
      }

      let _this = this

      util
        .request(
          api.CartDelete,
          {
            productIds: productIds,
          },
          'POST'
        )
        .then(function(res) {
          // _this.$refs.tabBotRef.CartGoodsCount()

          if (res.errno === 0) {
            if (res.data.isMultiOrderModel === 1) {
              that.setData({
                isMultiOrderModel: res.data.isMultiOrderModel,
                brandCartGoods: res.data.brandCartGoods,
                cartTotal: res.data.cartTotal,
              })
            } else {
              that.setData({
                isMultiOrderModel: res.data.isMultiOrderModel,
                cartGoods: res.data.cartList,
                cartTotal: res.data.cartTotal,
              })
            }

            that.setData({
              checkedAllStatus: that.isCheckedAll(),
            })

            that.$parent.set_onShow()
          }
        })
    },
  },
}
</script>
<style>
page {
  height: 100%;
  min-height: 100%;
  background: #f4f4f4;
}

.container {
  background: #f4f4f4;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow: hidden;
}

.service-policy {
  width: 750rpx;
  height: 73rpx;
  background: #f4f4f4;
  padding: 0 31.25rpx;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}

.service-policy .item {
  background: url('')
    0 center no-repeat;
  background-size: 10rpx;
  padding-left: 15rpx;
  display: flex;
  align-items: center;
  font-size: 25rpx;
  color: #666;
}

.no-login {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.no-login .c {
  width: 100%;
  height: auto;
  margin-top: 200rpx;
}

.no-login .c .image {
  margin: 0 auto;
  display: block;
  text-align: center;
  width: 160rpx;
  height: 137rpx;
  margin-bottom: 100rpx;
}

.no-login .c text {
  margin: 0 auto;
  display: block;
  width: 258rpx;
  height: 59rpx;
  line-height: 29rpx;
  text-align: center;
  font-size: 35rpx;
  color: #999;
}

.no-login button {
  width: 90%;
  margin: 40 auto;
  color: #fff;
  font-size: 30rpx;
  height: 96rpx;
  line-height: 96rpx;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: flex;
  bottom: 0;
  left: 0;
  border-radius: 0;
  padding: 0;
  margin-left: 5%;
  text-align: center;
  /* padding-left: -5rpx; */
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  letter-spacing: 3rpx;
  background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);
}

.no-cart {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.no-cart .c {
  width: 100%;
  height: auto;
  margin-top: 200rpx;
}

.no-cart .c1 {
  text-align: center;
  font-size: 28rpx;
  line-height: 34rpx;
  margin-top: 40rpx;
  color: #bec0c4;
}

.no-cart .c .image {
  margin: 0 auto;
  display: block;
  text-align: center;
  width: 160rpx;
  height: 137rpx;
}

.no-cart .c text {
  margin: 0 auto;
  display: block;
  width: 258rpx;
  height: 29rpx;
  line-height: 29rpx;
  text-align: center;
  font-size: 29rpx;
  color: #999;
}

.cart-view {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.cart-view .list {
  height: auto;
  width: 100%;
  overflow: hidden;
  background: #f4f4f4;
  margin-bottom: 120rpx;
}

.cart-view .group-item {
  height: auto;
  width: 100%;
  margin-top: 20rpx;
  background: #f4f4f4;
  margin-bottom: 18rpx;
}

.goods {
  margin-top: 20rpx;
  background: #fff;
}

.goods .h {
  height: 83.3rpx;
  line-height: 83.3rpx;
  margin-left: 31.25rpx;
  padding-right: 31.25rpx;
  border-bottom: 1px solid #f4f4f4;
  font-size: 30rpx;
  color: #333;
}

.goods .h .l {
  float: left;
  font-weight: bold;
}

.cart-view .item {
  display: flex;
  align-items: center;
}

.cart-view .item .checkbox {
  height: 36rpx;
  width: 36rpx;
  margin: 0 30rpx;
  background: url('../../static/imgs/h7.png') no-repeat;
  background-size: 34rpx;
}

.cart-view .item .checkbox.checked {
  background: url('../../static/imgs/h5.png') no-repeat;
  background-size: 34rpx;
}

.cart-view .item .cart-goods {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 47rpx 0;
}

.cart-goods .cart-goods1 {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24rpx;
}

.cart-goods .cart-goods1 .cart-goods11 {
  display: inline-block;
  color: #898b8d;
  font-size: 28rpx;
  line-height: 28rpx;
  margin: 0 20rpx 20rpx 0;
}

.cart-view .item .img {
  height: 196rpx;
  width: 196rpx;
  background: #f4f4f4;
}

.cart-view .item .info {
  flex: 1;
  margin: 0 30rpx;
}

.cart-view .item .t {
  margin-bottom: 20rpx;
}

.cart-view .item .name {
  color: #898b8d;
  font-size: 28rpx;
  line-height: 40rpx;
  max-height: 80rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cart-view .item .num {
  height: 28rpx;
  line-height: 28rpx;
  float: right;
}

.cart-view .item .attr {
  margin-bottom: 17rpx;
  height: 24rpx;
  line-height: 24rpx;
  font-size: 22rpx;
  color: #666;
  float: right;
}

.cart-view .item .b {
  font-size: 25rpx;
}

.cart-view .item .price {
  color: #fd4d36;
  font-size: 40rpx;
  line-height: 40rpx;
}

.cart-view .item .open {
  height: 28rpx;
  width: 150rpx;
  display: block;
  float: right;
  background: url('')
    right center no-repeat;
  background-size: 25rpx;
  font-size: 25rpx;
  color: #333;
}

.cart-view .item.edit .num {
  display: none;
}

.cart-view .item.edit .attr {
  text-align: right;
  background: url('')
    right center no-repeat;
  padding-right: 25rpx;
  background-size: 12rpx 20rpx;
  margin-bottom: 24rpx;
  height: 39rpx;
  line-height: 39rpx;
  font-size: 24rpx;
  color: #999;
  overflow: hidden;
}

.cart-view .item.edit .b {
  display: flex;
  height: 52rpx;
  overflow: hidden;
}

.cart-view .item.edit .price {
  line-height: 52rpx;
  height: 52rpx;
  flex: 1;
}

.cart-view .item .selnum {
  display: none;
}

.cart-view .item.edit .selnum {
  width: 235rpx;
  height: 52rpx;
  border: 1rpx solid rgba(181, 182, 184, 0.3);
  display: flex;
}

.selnum .cut {
  width: 60rpx;
  height: 100%;
  text-align: center;
  line-height: 50rpx;
}

.selnum .number {
  flex: 1;
  height: 100%;
  text-align: center;
  line-height: 50rpx;
  border-left: 1px solid rgba(181, 182, 184, 0.3);
  border-right: 1px solid rgba(181, 182, 184, 0.3);
  float: left;
}

.selnum .add {
  width: 60rpx;
  height: 100%;
  text-align: center;
  line-height: 50rpx;
}

.cart-view .group-item .header {
  width: 100%;
  height: 94rpx;
  line-height: 94rpx;
  padding: 0 26rpx;
  border-bottom: 1px solid #f4f4f4;
}

.cart-view .promotion .icon {
  display: inline-block;
  height: 24rpx;
  width: 15rpx;
}

.cart-view .promotion {
  margin-top: 25.5rpx;
  float: left;
  height: 43rpx;
  width: 480rpx;
  /*margin-right: 84rpx;*/
  line-height: 43rpx;
  font-size: 0;
}

.cart-view .promotion .tag {
  border: 1px solid #f48f18;
  height: 37rpx;
  line-height: 31rpx;
  padding: 0 9rpx;
  margin-right: 10rpx;
  color: #f48f18;
  font-size: 24.5rpx;
}

.cart-view .promotion .txt {
  height: 43rpx;
  line-height: 43rpx;
  padding-right: 10rpx;
  color: #333;
  font-size: 29rpx;
  overflow: hidden;
}

.cart-view .get {
  margin-top: 18rpx;
  float: right;
  height: 58rpx;
  padding-left: 14rpx;
  border-left: 1px solid #d9d9d9;
  line-height: 58rpx;
  font-size: 29rpx;
  color: #333;
}

.cart-bottom {
  position: fixed;
  bottom: var(--bot-height);
  left: 0;
  height: 100rpx;
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
}

.partC1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  height: 80rpx;
}

.partC1 .delete {
  margin-right: 30rpx;
  color: rgba(253, 77, 54, 1);
  font-size: 26rpx;
  line-height: 26rpx;
}

.partC1 .checkbox,
.cart-bottom .checkbox {
  height: 34rpx;
  padding-left: 51rpx;
  background: url('../../static/imgs/h7.png') no-repeat;
  background-size: 32rpx;
  font-size: 26rpx;
  line-height: 34rpx;
  margin: 0 20rpx 0 29rpx;
  color: #3c3e40;
}

.partC1 .checkbox.checked,
.cart-bottom .checkbox.checked {
  background: url('../../static/imgs/h5.png') no-repeat;
  background-size: 32rpx;
}

.cart-bottom .total {
  flex: 1;
  color: #fd4d36;
  font-size: 30rpx;
}
.cart-bottom .total1 {
  font-weight: bold;
  font-size: 48rpx;
  line-height: 48rpx;
}

.cart-bottom .delete {
  text-align: center;
  width: 180rpx;
  height: 60rpx;
  line-height: 82rpx;
  padding: 0;
  margin: 0;
  margin-left: -5rpx;
  padding-right: 25rpx;
  font-size: 25rpx;
  color: #f4f4f4;
  /* text-align: center; */
  border-top-left-radius: 0rpx;
  border-bottom-left-radius: 0rpx;
  border-top-right-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  letter-spacing: 3rpx;
  background-image: linear-gradient(to right, #9a9ba1 0%, #ae8b9c 100%);
}

.cart-bottom .checkout {
  height: 100rpx;
  width: 210rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 29rpx;
  background: #b4282d;
  color: #fff;
}

.action_btn_area {
  /* border: 1px solid #333; */
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  right: 0;
  top: 0;
  width: 380rpx;
  height: 100rpx;
}

.action_btn_area .edit {
  width: 140rpx;
  /* border: 1px solid #000; */
  height: 70rpx;
  line-height: 70rpx;
  padding: 0;
  margin: 0;
  margin-right: 5rpx;
  text-align: center;
  /* padding-left: 25rpx; */
  font-size: 25rpx;
  color: #f4f4f4;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  letter-spacing: 3rpx;
  /* background-image: linear-gradient(to right, #ff7701 100%); */
  background-image: linear-gradient(to right, #f8b230 0%, #ee9e09 100%);
}

.action_btn_area .checkout {
  width: 184rpx;
  height: 74rpx;
  line-height: 74rpx;
  color: #fff;
  background: url('../../static/imgs/h8.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  margin-left: 18rpx;
  margin-right: 30rpx;
  font-size: 30rpx;
}

.action_btn_area .delete {
  width: 184rpx;
  height: 74rpx;
  line-height: 74rpx;
  color: #fd4d36;
  background: url('../../static/imgs/h9.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: 30rpx;
}

.action_btn_area .sure {
  text-align: center;
  width: 140rpx;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0;
  margin: 0;
  margin-right: 10rpx;
  padding-left: -5rpx;
  font-size: 25rpx;
  color: #f4f4f4;
  /* text-align: center; */
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  letter-spacing: 3rpx;
  background-image: linear-gradient(to right, #f8b230 0%, #ee9e09 100%);
  /* background-image: linear-gradient(to right, #ff7701 0%, #fe4800 100%); */
}

.auth_btn {
  position: fixed;
  top: 55vh;
  left: 10vw;
  width: 80vw;
  height: 96rpx;
  line-height: 96rpx;
  font-size: 25rpx;
  color: #f4f4f4;
  /* text-align: center; */
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  letter-spacing: 3rpx;
  background-image: linear-gradient(to right, #f8b230 0%, #ee9e09 100%);
}
</style>
